<template>
  <div class="patientContent">
    <div class="patientLeft">
      <div>
        <span class="word">患者姓名</span>
        <span>{{ props.setPatient[0].cz_name }}</span>
      </div>
      <div>
        <span class="word">证件类型</span>
        <span>{{ props.setPatient[0].czxq_type }}</span>
      </div>
      <div>
        <span class="word">微信昵称</span>
        <span>{{ props.setPatient[0].czxq_wx }}</span>
      </div>
      <div>
        <span class="word">就诊人地址</span>
        <span class="lefts">{{ props.setPatient[0].czxq_site }}</span>
      </div>
    </div>
    <div class="patientCentre">
      <div>
        <span class="word">就诊卡号</span>
        <span>{{ props.setPatient[0].cz_iccid }}</span>
      </div>
      <div>
        <span class="word">证件号码</span>
        <span>{{ props.setPatient[0].czxq_sfz }}</span>
      </div>
      <div>
        <span class="word">手机号码</span>
        <span>{{ props.setPatient[0].czxq_phone }}</span>
      </div>
    </div>
    <div class="patientBelow">
      <div class="buddha">
        <span class="word">患者头像</span>
        <span class="Icon"></span>
      </div>
      <div>
        <span class="word">关系</span>
        <span class="self">{{ props.setPatient[0].czxq_relation }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(["setPatient"]);
</script>

<style lang="scss">
//中下
.patientContent {
  width: 100%;
  height: 300px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  .word {
    color: #b2aabd;
  }
  .patientLeft {
    width: 28.5%;
    .lefts {
      margin-left: 16px;
    }
    span {
      margin: 0px 35px;
    }
    div {
      margin: 45px 0px;
    }
    margin-left: 3%;
  }
  .patientCentre {
    width: 28%;
    span {
      margin: 0px 35px;
    }
    div {
      margin: 45px 0px;
    }
    margin-left: 6%;
  }
  .patientBelow {
    width: 25%;
    display: flex;
    flex-direction: column;
    .self {
      margin-left: 90px;
    }
    .buddha {
      margin-bottom: -20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 17px;
      .Icon {
        display: inline-block;
        width: 70px;
        height: 70px;
        background-color: #e6f1ff;
        border-radius: 50%;
      }
    }

    span {
      margin: 0px 35px;
    }
    div {
      margin: 45px 0px;
    }
    margin-left: 6%;
  }
}
</style>